<template>
  <div class="wrapper">
    <div class="title">传感器数据</div>
    <!-- <el-col v-for="item of sensorData" :key="item.icon" :span="8" :sm="12" class="item">
      <div class="icon">
        <svg-icon :icon-class="item.icon" />
        <span>{{ item.title }}</span>
      </div>
      <div class="info">
        <div>{{ item.data }}</div>
        <el-tag>{{ item.tip }}</el-tag>
      </div>
    </el-col> -->
    <el-row class="list-wrapper">
      <el-col v-for="(item,index) of sensorData" :key="item.icon" class="list" :span="8">
        <el-popover
          placement="right"
          width="400"
          trigger="hover"
          @show="showChart(index)"
        >
          <div :id="item.icon" style="width:400px;height:200px;" />
          <div slot="reference" class="list-item">
            <svg-icon :icon-class="item.icon" class="icon" />
            <span class="icon-title">{{ item.title }}</span>
            <div class="data">{{ item.data }}</div>
          </div>
        </el-popover>
      </el-col>
      <el-col v-for="item of placeholder" :key="item" class="list" :span="8">
        <div class="list-item">
          <svg-icon icon-class="comingsoon" class="icon" />
          <span class="icon-title">敬请期待</span>
          <div class="data">......</div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getSevenDays } from '@/utils/index'
import { getChartData } from '@/api/sensorData'

export default {
  props: {
    sensorData: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      shuju: [],
      placeholder: []
    }
  },
  watch: {
    sensorData: {
      handler(newValue) {
        const data = []
        const l = newValue.length % 3
        if (l !== 0) {
          for (let i = 0; i < 3 - l; i++) {
            data.push(i)
          }
        }
        this.placeholder = data
      },
      deep: true,
      immediate: true
    }
  },
  // computed: {
  //   placeholder() {
  //     const data = []
  //     const l = this.sensorData % 3
  //     if (l !== 0) {
  //       for (let i = 0; i < 3 - l; i++) {
  //         data.push(i)
  //       }
  //     }
  //     return data
  //   }
  // },
  methods: {
    filterData(res, icon, index) {
      switch (icon) {
        case 'radiation': return res.pars[index]
        case 'rainfall': return res.rainFalls[index]
        case 'sunpower': return res.radiations[index]
        case 'dew': return res.dewTemps[index]
        case 'soiltemp': return res.soilTemps[index]
        case 'soilhum': return res.soilHums[index]
        case 'airtemp': return res.airTemps[index]
        case 'airhum': return res.airHums[index]
        case 'windspeed': return res.windSpeeds[index]
        case 'winddirection': return res.windDirections[index]
      }
    },
    async showChart(index) {
      const item = this.sensorData[index]
      const sevenDays = getSevenDays(new Date())
      let data = []
      const res = await getChartData({ sensorId: item.sensorId })
      if (res.dates === undefined) {
        data = [0, 0, 0, 0, 0, 0, 0]
      } else {
        const resDates = res.dates.map(item => {
          return item.substring(5, 10)
        })
        sevenDays.map(date => {
          const index = resDates.findIndex(resDate => {
            return date === resDate
          })
          if (index !== -1) {
            data.push(this.filterData(res, item.icon, index))
          } else {
            data.push(0)
          }
        })
      }
      const myChart = this.$echarts.init(document.getElementById(item.icon))
      // 绘制图表
      myChart.setOption({
        title: { text: item.title },
        xAxis: {
          type: 'category',
          data: sevenDays
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data,
          type: 'line',
          itemStyle: {
            borderColor: '#aaa'
          },
          lineStyle: {
            color: 'rgb(102,177,255)'
          }
        }],
        tooltip: {
          trigger: 'axis',
          formatter: function(param) {
            return param[0].data
          }
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
/* .wrapper {
  margin: 20px 0;
} */

.title {
  font-family: '微软雅黑';
  font-weight: bolder;
  padding: 0 0 15px !important;
}

.list-wrapper {
  border-radius: 5px;
  // box-shadow: 0 0 8px 0 rgba(0,0,0,0.3);
  .list {
    color: #409EFF;
    &:nth-child(even) {
      background-color: #e5e9f2;
    }
    .list-item {
      display:flex;
      flex-direction: column;
      align-items: center;
      font-size:12px;
      padding: 8px 10px;
      cursor: pointer;
      > .icon {
        font-size: 30px;
      }
      > .icon-title {
        margin: 8px 0;
      }
    }
  }
}

.item {
  display:flex;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  padding:10px;
  justify-content: center;
  align-items: center;
}

.chart {
  font-size: 18px;
  margin-left: 10px;
  color: #bbb;
  cursor: pointer;
}

</style>

